<template>
  <!-- 职业发展路径 -->
  <view>
    <view class="professionPathWayWrapper">
      <view class="styleJobDescriptionTitleContainer">
        <view class="styleJobDescriptionTitleLine"></view>
        <view class="styleJobDescriptionTitle"> {{ title }}</view>
      </view>
      <template v-if="professionPathWayList.length > 0">
        <view
          class="content"
          v-for="(item, index) in professionPathWayList"
          :key="index"
        >
          <!-- "发展路径 职业资格等级晋升要求" -->
          <PositionLevelRequire
            v-if="item.layerId === '209'"
            :layerInfo="item"
          ></PositionLevelRequire>
          <!-- "等级薪酬" -->
          <PositionLevelSalary
            v-if="item.layerId === '204'"
            :layerInfo="item"
          ></PositionLevelSalary>
          <!-- "职业知识" -->
          <RadarLevelContent
            v-if="item.layerId === '206'"
            :layerInfo="item"
            canvasId="careerPathKnowledge"
          ></RadarLevelContent>
          <!-- "专业技能" -->
          <RadarLevelContent
            v-if="item.layerId === '207'"
            :layerInfo="item"
            canvasId="careerPathSkill"
          ></RadarLevelContent>
          <!-- "能力素质" -->
          <RadarLevelContent
            v-if="item.layerId === '208'"
            :layerInfo="item"
            canvasId="careerPathQuality"
          ></RadarLevelContent>
        </view>
      </template>
      <Empty
        v-else
        :baseImg="emptyImg"
        :text="emptyTitle"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import { getLayerDetailsData } from '@/api/modules/career';
import PositionLevelRequire from './positionDetailComponents/positionLevelRequire.vue';
import PositionLevelSalary from './positionDetailComponents/positionLevelSalary.vue';
import RadarLevelContent from './positionDetailComponents/radarLevelContent.vue';
import Empty from '@/components/Empty.vue';
import LoginDialog from '@/components/LoginDialog';

export default {
  components: {
    PositionLevelRequire,
    PositionLevelSalary,
    RadarLevelContent,
    Empty,
    LoginDialog
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    positionId: {
      type: String,
      default: ''
    },
    layerId: {
      type: String,
      default: null
    },
    positionName: {
      type: String,
      default: ''
    },
    pageName: {
      type: String,
      default: ''
    },
    isAuthSetting: {
      type: Boolean,
      default: false
    },
    personId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      professionPathWayList: [],
      emptyTitle: '暂无数据'
    };
  },
  mounted() {
    this.getLayerDetail();
  },
  methods: {
    loginSuccessBack() {
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      this.$emit('refreshData');
    },
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      const params = {
        id: this.positionId,
        layerIds: this.layerId
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.professionPathWayList = res.data[0].children[0].children;
          } else {
            console.log('请求失败');
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
.professionPathWayWrapper {
  background-color: white;
  border-radius: 16rpx;
  padding-top: 36rpx;
  padding-bottom: 28rpx;
  margin: 0 16rpx 0 16rpx;

  .styleJobDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 24rpx;

    .styleJobDescriptionTitleLine {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .styleJobDescriptionTitle {
      color: #222222;
      font-size: 32rpx;
      font-weight: 800;
    }
  }

  .profession-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30rpx;

    .profession-item {
      height: 76rpx;
      background: #edf4ff;
      border-radius: 12rpx;
      align-items: center;
      margin-right: 14rpx;
      margin-bottom: 24rpx;
      padding: 18rpx 24rpx;
      box-sizing: border-box;
      text-align: center;
    }
  }

  .styleGridJobDescriptionItem {
    .styleGridJobDescriptionItemIcon {
    }

    .styleGridJobDescriptionItemText {
      margin-top: 6rpx;
      color: #555555;
      font-size: 24rpx;
    }

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
span-ios {
  width: 150rpx;
  margin-top: 19rpx;
}

span-android {
  width: 150rpx;
  margin-top: 5rpx;
}

.introduction {
  /* flex-grow: 1; */
  width: 470rpx;
  overflow: hidden;
  /* max-height: 84rpx; */
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  font-family: D-DIN-PRO, D-DIN-PRO;
  padding: 0;
}

.my-introduction {
  width: 470rpx;
  white-space: pre-wrap;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  font-family: D-DIN-PRO, D-DIN-PRO;
}

.glass {
  width: 20rpx;
  height: 100%;
  position: absolute;
  right: 32rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.lm-wechat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  ::v-deep button {
    background-color: transparent;
    padding: 0 !important;
    border: none;
    height: 100%;
  }

  ::v-deep .u-loading::after {
    background-color: transparent;
  }
}
</style>
